<template>
  <div class="app-container">
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品评论</el-breadcrumb-item>
    </el-breadcrumb>

    <!--查询表单-->
    <el-card>
      <!--查询表单  :inline横向表单-->
      <el-form :inline="true">
        <el-form-item label="商品名称：">
          <el-input v-model="queryInfo.title" label-width="50px"></el-input>
        </el-form-item>
        <!-- label组件前文本 -->
        <el-form-item label="用户名称：">
          <el-input v-model="queryInfo.userName" label-width="50px"></el-input>
        </el-form-item>

        <el-form-item label="评价值：">
          <!-- clearable删除已选的值 -->
          <el-select
            v-model="queryInfo.contentScore"
            clearable
            placeholder="审核状态"
          >
            <el-option value="0" label="差评" />
            <el-option value="1" label="中评" />
            <el-option value="2" label="好评" />
          </el-select>
        </el-form-item>

        <!-- <el-form-item label="创建时间">
          <el-date-picker
            v-model="queryInfo.joinDateBegin"
            placeholder="开始时间"
            value-format="yyyy-MM-dd"
          />
        </el-form-item> -->
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="getProductList()"
            >查询</el-button
          >
          <el-button type="default" @click="resetData()">清空</el-button>
        </el-form-item>
      </el-form>

      <!-- 表格 -->
      <el-table
        :data="productList"
        border
        stripe
        row-class-name="myClassList"
        :header-cell-style="{
          background: '#f8f8f9',
          color: '#606266',
          fontSize: '13px',
          fontFamily: '微软雅黑 Bold, 微软雅黑 Regular, 微软雅黑',
          fontWeight: 700,
        }"
      >
        <el-table-column label="序号" width="50">
          <template slot-scope="scope">
            {{ (queryInfo.page - 1) * queryInfo.limit + scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="用户昵称" width="110" align="center">
          <template slot-scope="scope">
            {{ scope.row.userRsp.name }}
          </template>
        </el-table-column>
        <el-table-column label="商品编号" width="110" align="center">
          <template slot-scope="scope">
            {{ scope.row.productRsp.productCode }}
          </template>
        </el-table-column>
        <el-table-column label="商品名称" width="261" align="center">
          <template slot-scope="scope">
            {{ scope.row.productRsp.title }}
          </template>
        </el-table-column>
        <el-table-column label="评分" width="170">
          <template slot-scope="scope">
            <el-rate
              v-model="scope.row.contentScore"
              disabled
              show-score
              text-color="#ff9900"
              score-template="{value}"
            >
            </el-rate>
            <!-- {{ scope.row.content }} -->
          </template>
        </el-table-column>
        <el-table-column label="IP地址" width="115" align="center">
          <template slot-scope="scope">
            <p>{{ scope.row.userIp }}</p>
          </template>
        </el-table-column>
        <el-table-column label="评价时间" width="135" align="center">
          <template slot-scope="scope">
            <p>{{ scope.row.createTime }}</p>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="200" align="center">
          <template slot-scope="scope">
            <router-link :to="'/commentInfo/' + scope.row.id">
              <el-button type="primary" size="mini" icon="el-icon-edit"
                >查看</el-button
              >
            </router-link>
            <el-button
              v-if="userInfo.isAdmin"
              type="warning"
              size="mini"
              icon="el-icon-delete"
              @click="removeUserById(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <!--  changeCurrentPage()不能加括号，应该下面函数有参数，这里不给值默认会传undefined -->
      <!-- 
         @size-change 监听 pagesize改变的事件 （选择显示多少条数据）
         @current-change  currentPage当前页数 改变时会触发 下一页
          current-page当前页数
          page-sizes 每页显示个数选择器的选项设置
          total总条目数 page-size每页显示条目个数默认10 prev上一页 pager页数 next下一页
          sizes选择器
         -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.page"
        :page-sizes="[5, 10, 20]"
        :page-size="queryInfo.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>

  
  </div>
</template>

<script>
export default {
  data() {
    return {
      total: 0, // 总记录数
      //查询条件
      queryInfo: {
        page: 1,
        limit: 5,
      },
      productList: [], // 商品列表
      imagePath: '', //商品图片url
      //添加分类的表单数据对象
      verifyForm: {
        id: '', //审核id
        productId: '', //商品id
        //父级分类的id
        verifyStatus: 0,
        //分类的等级，默认要添加的是一级分类
        verifyFeedback: '',
      },
      verifyFormRules: {
        verifyStatus: [
          //validator指定自定义的校验规则
          { required: true, message: '审核状态不为空', trigger: 'blur' },
        ],
        verifyFeedback: [
          //validator指定自定义的校验规则
          { required: true, message: '审核结果不为空', trigger: 'blur' },
        ],
      },
        //获取当前的用户
      userInfo: {},
    }
  },

  created() {
      //获取当前用户  parse()json字符串转对象
    this.userInfo = JSON.parse(window.sessionStorage.getItem('user'))
    this.getProductList() // 显示商品列表
    // // 初始化分类列表
    // this.initSubjectList()
    // // 获取商品列表
    // this.initTeacherList()
  },
  methods: {
    // 获取商品列表
    //获取商品分类数据
    async getProductList() {
      const { data: res } = await this.$http.get(
        'api/service-product/admin/product/comment/list',
        {
          params: this.queryInfo,
        }
      )
      // console.log(res.data)

      if (res.code !== 200) {
        return this.$message.error(res.msg)
      }

      //把数据列表赋值给catelist
      this.productList = res.data.records
      //为总数据条数赋值
      this.total = res.data.total
      //给图片拼接访问url
      // this.productList.forEach(item => {
      //    if(item.productPic.length > 0){
      //      item.productPic.forEach(item1 =>{
      //          item1.url = 'http://8.134.34.190/'+item1.url
      //      })

      //    }
      // });

      console.log(this.productList)
    },

    //监听 pagesize改变
    handleSizeChange(newSize) {
      this.queryInfo.limit = newSize
      this.getProductList()
    },

    //监听pagenum改变
    handleCurrentChange(newPage) {
      this.queryInfo.page = newPage
      this.getProductList()
    },

    // 重置表单
    resetData() {
      this.queryInfo = {
        //当前的页数
        page: 1,
        //当前每页显示多少条数据
        limit: 5,
      }
      this.getProductList()
    },

    //根据id删除评论
    async removeUserById(id) {
      //弹框询问评论是否删除数据
      const confirmResult = await this.$confirm(
        '此操作将永久删除该用户, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).catch((err) => err)
      //如果评论确认删除，则返回值为字符串confirm
      //如果评论取消了删除，则返回值为字符串 cancel
      //  console.log(res)

      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除')
      }
      const { data: res } = await this.$http.delete('api/service-product/admin/product/comment/delete/' + id)
      if (res.code !== 200) {
        return this.$message.error('删除评论失败')
      }
      this.$message.success('删除评论成功！')
      //刷新列表
      this.getProductList()
    },
   

   

    //监听修改分类对话框的关闭事件
    DialogClosed() {
      // loginFormRef是el-form ref属性值   resetFields()对整个表单进行重置，将所有字段值重置为初始值并移除校验结果
      this.$refs.verifyFormRef.resetFields()
    },
  },
}
</script>

<style lang="less" scoped>
.el-card /deep/ .el-card__body {
  padding: 0px !important;
}
.el-form {
  padding: 10px;
}
.el-icon-date {
  font-weight: 400;
  font-size: 18px;
  text-align: center;
  color: #ffdcaa;
}
.el-icon-success {
  font-weight: 400;
  font-size: 18px;
  text-align: center;
  color: lightgreen;
}
.el-icon-error {
  font-weight: 400;
  font-size: 18px;
  text-align: center;
  color: lightgreen;
}
</style>
